<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>

		<Col span="6">
			<Input v-model="key">
				<Select v-model="filterKey" slot="prepend" style="width: 80px">
					<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Input>
		</Col>
		<Col span="2">
			<Select  placeholder="请选择状态" clearable v-model="statusKey" :style="{marginLeft:'15px'}">
				<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</Col>
		<Col span="4">
			<Button type="primary" :style="{marginLeft:'30px'}" @click="search">搜索</Button>
		</Col>
		<Col span="12">
			<div style="text-align:right">
				<Button type="primary" icon="md-add" @click.native="link2create">新增</Button>
			</div>
		</Col>

		<Col span="24">
			<div class="cleaner10"></div>
			<Table :loading="tableLoading" border stripe :columns="columns" :data="articleData.data"></Table>
			<div class="cleaner10"></div>
			<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="articleData.total" :page-size="articleData.pageSize" :current.sync="articleData.page" :transfer="true" show-elevator show-sizer></Page>
		</Col>
	</Row>

</div>
</template>
<script>
// 引入子组件
import {mapState,mapGetters} from 'vuex'
import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
export default { 
	name:'publisher-index',
	components: {Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'文章列表',
			tableLoading:true,
			articleData:[],
			showDetail:false,
			detail:{},
			statusKey:'',
			statusList: [
				{value: 0,label: '暂存'},
				{value: 1,label: '发布'},
				{value: 2,label: '撤销'},
			],
			filterKey:'',
			key:'',
			keyList: [
				{value: 'title',label: '标题'},
			],
			columns:[
				{title: '编号',key: 'id',width: 70,fixed: 'left'},
				{title: '栏目',key: 'channel_name'},
				{title: '标题',key: 'title'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['暂存','发布','撤销','删除']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '发布日期',key: 'publish_at'},
				{title: '排序',key: 'order', sortable: true},
				{title: '浏览量',key: 'hits'},
				{title: '评论数',key: 'comments'},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:220,
					render: (h, params) => {
						return h('div', [
							h(Button, {
								props: {
									type: 'success',
									size: 'small',
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {this.$router.push({path:'/cms/article/edit/'+params.row.id})}
								}
							}, '编辑'),
							h(Button, {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									display:1==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,1,params.index)}
								}
							}, '发布'),
							h(Button, {
								props: {
									type: 'warning',
									size: 'small'
								},
								style: {
									marginRight: '5px',
									display:2==params.row.status||0==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,2,params.index)}
								}
							}, '撤销'),
							h(Button, {
								props: {
									type: 'error',
									size: 'small'
								},
								style: {
									display:3==params.row.status||0==params.row.status?'none':'inline-block'
								},
								on: {
									click: () => {this.changeStatus(params.row.id,3,params.index)}
								}
							}, '删除')
						]);
					}
				}

			],
		}
	},
	methods:{
		init:function(){
			let self=this
			self.$http.get("/v1/cms/articles",{params: { 'token': self.token }})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.articleData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Message.error(error.message)
				self.tableLoading=false
			})
		},
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/cms/articles",{params: { 'token': self.token, page:self.articleData.page, pageSize: self.articleData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.articleData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info(error.message);
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.articleData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/publishers",{params: { 'token': self.token, page:1, pageSize: self.articleData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.articleData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})
		},
		changeMenu:function(){
			this.$store.dispatch('setMenuActive','0')
			this.$store.dispatch('setMenuOpen', ['0'])
			return false;
		},
		changeStatus:function(uid,statusId,index){
			let self=this
			self.tableLoading=true
			self.$http.post("/v1/cms/articles?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.articleData.data[index].status=statusId
					self.$Message.success('操作成功');
				}else{
					
					self.$Message.error(response.data.message);
				}
				self.tableLoading=false
			}).catch(function(error){
				self.$Message.error( error.message);
				self.tableLoading=false
			})
		},
		search:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/cms/articles",{params: { 'token': self.token, page:1, pageSize: self.articleData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}
			}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.articleData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})

		},
		authenticationStr:function(val){
			return String(val).replace(/[\[\]"]/g,"");
		},
		link2create:function(){this.$router.push({"name":"cms-article-create"})}
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
		// this.init()
	},
	computed:{
		...mapGetters(['token']),
	}
}



</script>
<style lang="less" scoped>
</style>